<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/js/jquery-jqplot/jquery.jqplot.css" />

<style type="text/css">
.borderT td {
	border: 1px solid #dddddd;
}
</style>

<script src="resources/js/jquery-jqplot/jquery.jqplot.js"></script>
<script src="resources/js/jquery-jqplot/jquery.jqplot.min.js"></script>

<script src="resources/js/jquery-jqplot/plugins/jqplot.highlighter.min.js"></script>
<script src="resources/js/jquery-jqplot/plugins/jqplot.cursor.min.js"></script>

<script type="text/javascript" src="resources/js/jquery-jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-jqplot/plugins/jqplot.pointLabels.min.js"></script>

<script src="resources/js/jquery-jqplot/plugins/jqplot.highlighter.min.js"></script>
<script src="resources/js/jquery-jqplot/plugins/jqplot.cursor.min.js"></script>

<script type="text/javascript">
$(function() {
	var pvMapSize = parseInt($("#pvMapSize").val());
	var data = new Array();
	
	for(var i = 0; i < pvMapSize; i++) {
		data[i] = [$("#day_"+i).html().substring(5,10),
		           parseInt(($("#cpc_"+i).html() == "" ? 0 : parseInt( $("#cpc_"+i).html() ))) + 
		           parseInt(($("#cpv_"+i).html() == "" ? 0 : parseInt( $("#cpv_"+i).html() ))) ];
	}

	var plot1 = $.jqplot("chart", [data], {
		animate: true,
		animateReplot: true,
		seriesDefaults: {
			pointLabels: {
				show: true,
				stackedValue: true,
				location: "s"
			}
		},
		axesDefaults: {
			tickRenderer: $.jqplot.CanvasAxisTickRenderer,
			tickOptions: {
				fontSize: "10pt"
			}
		},
		axes: {
			xaxis: {
				renderer: $.jqplot.CategoryAxisRenderer
			}
		},
		highlighter: {
			show: true,
			sizeAdjust: 7.5,
			tooltipAxes: "y"
		},
		cursor: {
			show: false
		}
	});
});
</script>

</head>
<body>

<h3 style="color:#aaaaaa;">검색 결과</h3>
<!-- 토탈 -->
<table id="resultTable" class="borderT" width="100%" cellspacing="0" cellpadding="10" style="text-align:center;">
	<tr class="table_title">
		<td>광고Title</td>
		<td>선/후불</td>
		<td>보장 PV</td>
		<td>총 CPC</td>
		<td>총 CPV</td>
	</tr>
	<tr>
		<td>${ad.contents_title }</td>
		<td>
			<c:if test="${ad.paytype == 'beforePay' }">선불제</c:if>
			<c:if test="${ad.paytype == 'afterPay' }">후불제</c:if>
		</td>
		<td>${ad.promisepv }</td>
		<td>${totalCpc }</td>
		<td>${totalCpv }</td>
	</tr>
</table>
<br/>

<!-- 그래프 -->
<div id="chart" style="width:100%; height:300px;"></div>

<!-- 상세데이터 -->
<table class="borderT" width="100%" cellspacing="0" cellpadding="4" style="text-align:center;">
	<tr class="table_title">
		<td>날짜</td>
		<td>광고Title</td>
		<td>선/후불</td>
		<td>CPC</td>
		<td>CPV</td>
		<td>추가집행여부</td>
	</tr>
	
	<c:if test="${fn:length(pvMap) > 0 }">
	<input type="hidden" id="pvMapSize" value="${fn:length(pvMap) }"/>
	<c:forEach var="list" items="${pvMap }" varStatus="stat">
		<tr>
			<td width="15%" id="day_${stat.index }">${fn:substring(list.day, 0, 13) }시</td>
			<td width="30%">${list.title }</td>
			<td width="12%">
				<c:if test="${list.paytype == 'beforePay' }">선불제</c:if>
				<c:if test="${list.paytype == 'afterPay' }">후불제</c:if>
			</td>
			<td width="12%" id="cpc_${stat.index }">${list.cpc }</td>
			<td width="12%" id="cpv_${stat.index }">${list.cpv }</td>
			<td></td>
		</tr>
	</c:forEach>
	</c:if>
	<c:if test="${fn:length(pvMap) <= 0 }">
		<tr>
			<td colspan="100%" align="center">리스트가 없습니다.</td>
		</tr>
	</c:if>
</table>

</body>
</html>